<template>
  <el-card class="box-card" :style="{'line-height':enableSwap?'':'25px'}">
    <div v-for="info in tableInfos" v-bind:key="info.name">
      <el-row>
        <el-col :span="12" style="text-align:left;">{{info.name}}</el-col>
        <el-col :span="12" style="text-align:right;">{{info.value}}</el-col>
      </el-row>
    </div>
    <el-row :style="{'margin-top':enableSwap?'15px':'20px'}">{{'CPU使用：'+cpuUsage+'%'}}</el-row>
    <el-progress style="margin-top:2px;" :show-text="false" :stroke-width="15" :percentage="cpuUsage" />
    <el-row style="margin-top:10px;">{{'内存使用：'+mems[0]+'GB/'+mems[1]+'GB - '+mems[2]+'%'}}</el-row>
    <el-progress style="margin-top:2px;" :show-text="false" :stroke-width="15" :percentage="mems[2]" />
    <el-row v-if="enableSwap" style="margin-top:10px;">{{'交换空间使用：'+swaps[0]+'GB/'+swaps[1]+'GB - '+swaps[2]+'%'}}</el-row>
    <el-progress v-if="enableSwap" style="margin-top:2px;" :show-text="false" :stroke-width="15" :percentage="swaps[2]" />
  </el-card>
</template>

<script>
import moment from 'moment'

export default {
  name: "Monitor",
  data() {
    return {
      tableInfos: [],
      cpuUsage: 0,
      totalIdle: 0,
      totalTime: 0,
      mems: [0, 0, 0],
      swaps: [0, 0, 0],
      enableSwap: true
    }
  },
  mounted() {
    this.getSystemInfos()
    setInterval(() => {
      this.getSystemInfos()
    }, 1000 * 3)
  },
  methods: {
    getSystemInfos() {
      const infos = window.API.listSystemInfos((mems, swaps) => {
        // 内存
        const usedMem = mems[2] / 1024 / 1024
        const totalMem = mems[1] / 1024 / 1024
        const memUsage = usedMem / totalMem * 100
        this.mems = [
          Number(usedMem.toFixed(1)),
          Number(totalMem.toFixed(1)),
          Number(memUsage.toFixed(1))
        ]
        // 交换空间
        const usedSwap = swaps[2] / 1024 / 1024
        const totalSwap = swaps[1] / 1024 / 1024
        const swapUsage = totalSwap === 0 ? 0 : usedSwap / totalSwap * 100
        this.swaps = [
          Number(usedSwap.toFixed(1)),
          Number(totalSwap.toFixed(1)),
          Number(swapUsage.toFixed(1))
        ]
        this.enableSwap = totalSwap > 0
      })
      // 网络
      const networkCardPrefixes = [
        'en', // Ethernet
        'wl', // 无线网卡（WIFI）
        'ww', // 无线广域网卡（4G上网卡等）
        'eno', // 板载网卡
        'ens', // 热插拔网卡
        'enp', // pcie网卡
      ]
      const networkInterfaceKeys = Object.keys(infos.networkInterfaces)
      const networks = networkCardPrefixes.map(i => {
        const index = networkInterfaceKeys.findIndex(j => j.indexOf(i) === 0)
        if (index >= 0)
          return infos.networkInterfaces[networkInterfaceKeys[index]]
        else
          return null
      }).filter(i => i != null)
      const tableInfoDic = {
        '主机名': infos.hostname,
        '内核': infos.release,
        '已开机': new moment(infos.uptime * 1000).utc().format('HH时mm分ss秒'),
        '网络': networks.length > 0 ? networks[0][0].address : '无网络'
      }
      const keys = Object.keys(tableInfoDic)
      this.tableInfos = keys.map(i => {
        return {
          name: i,
          value: tableInfoDic[i]
        }
      })
      // CPU
      const totalIdle = infos.cpus.map(i => i.times.idle).reduce((p, c) => p + c)
      const totalTime = infos.cpus.map(i => Object.values(i.times).reduce((p, c) => p + c)).reduce((p, c) => p + c)
      const cpuUsage = (1 - (totalIdle - this.totalIdle) / (totalTime - this.totalTime)) * 100
      this.cpuUsage = Number(cpuUsage.toFixed(1))
      this.totalIdle = totalIdle
      this.totalTime = totalTime
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 400px;
  height: 259px;
  border: none;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
</style>